<template>
    <el-dialog v-model="visible" title="城市信息详情" width="800px" :close-on-click-modal="false" :align-center="true"
        :draggable="true">
        <div class="city-detail-container">
            <!-- 城市标题区域 -->
            <div class="city-title">
                <h3>{{ dialogContent.text }}</h3>
                <div class="coordinates">
                    <span>地理位置：</span>
                    <span>位于东经 <span class="axios">{{ dialogContent.xAxios }}</span>, 北纬 <span class="axios">{{
                        dialogContent.yAxios }}</span></span>
                </div>
            </div>

            <!-- 分割线 -->
            <el-divider></el-divider>

            <!-- 城市描述区域 -->
            <div class="city-description">
                <h4>城市简介：</h4>
                <p style="margin: 10px 0;">{{ dialogContent.descrip }}</p>
            </div>
        </div>

        <!-- 弹窗底部按钮 -->
        <div slot="footer" class="dialog-footer">
            <el-button @click="closeDialog">关闭</el-button>
            <el-button type="primary">保存信息</el-button>
        </div>
    </el-dialog>
</template>

<script setup>
import { ref, watch } from 'vue';

// 定义 props
const props = defineProps({
    modelValue: Boolean,  // v-model 的值
    dialogContent: Object
});

// 定义 emits
const emit = defineEmits(['update:modelValue']);

// 创建本地响应式变量
const visible = ref(props.modelValue);

// 监听 props 变化
watch(() => props.modelValue, (newValue) => {
    visible.value = newValue;
});

// 监听本地变量变化
watch(visible, (newValue) => {
    emit('update:modelValue', newValue);
});

// 关闭对话框的方法
const closeDialog = () => {
    visible.value = false;
};
</script>

<style scoped lang="scss">
.city-detail-container {
    padding: 10px;
}

.city-title {
    margin-bottom: 15px;
}

.city-title h3 {
    margin: 0 0 10px 0;
    color: #1f2d3d;
}

.coordinates {
    color: #666;
    font-size: 14px;

    .axios {
        color: rgb(7, 7, 7);
        font-size: 16px;
        text-decoration: underline;
    }
}

.city-description p {
    line-height: 1.6;
    color: #333;
    text-align: justify;
}

.extended-info {
    margin-top: 20px;
}
</style>